const tile = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
    })
})

var map = new ol.Map({
    target: 'map',
    layers: [
        tile
    ],
    view: new ol.View({
        center: [12676737.157879721, 2578348.6131051104],
        zoom: 15.4,
        projection: 'EPSG:3857'
    })
});

// const source = new ol.source.Vector({
//     url: '/webgis-examples-code/book-examples/data/province.geojson',
//     format: new ol.format.GeoJSON()
// })

fetch('./data/polygon.geojson').then(res => res.json()).then(geojson => {
    const features = (new ol.format.GeoJSON()).readFeatures(geojson)
    features.forEach(f => {
        f.getGeometry().transform('EPSG:4326', 'EPSG:3857')
    })

    const source = new ol.source.Vector({
        features
    })
    const vecLayer = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ff0000',
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255,0,0,0.4)'
            })
        })
    })
    map.addLayer(vecLayer)
})

